﻿@{
    Uri url = new Uri(Request.Url.AbsoluteUri);
    ViewBag.Server = url.GetLeftPart(UriPartial.Authority);
    string crudServiceBaseUrl = ViewBag.Server + "/api/";
    string RafikiMasterVM = System.Configuration.ConfigurationManager.AppSettings["RafikiMasterVM"];
    // Find the FIRST Groupable field and group on that.
    // Need to decide how to handle a function with NO Group as the rest of the code logic does not hold up.
    int groupcount = 0; // count up number of groupabale attributes to determine display.
    foreach (var item in ViewBag.AttList)
    {
        if (item.Groupable)
        {
            if (groupcount==0) {
                ViewBag.FirstGroupAttribute = @item.AttributeName;
            }
            groupcount++;
        }
    }
}

@* Table Style - for now *@
<style>
    table {
        color: #333;
        font-family: Helvetica, Arial, sans-serif;
        width: 98%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    td, th {
        border: 1px solid transparent; /* No more visible border */
        height: 30px;
        transition: all 0.3s; /* Simple transition for hover effect */
    }

    th {
        background: #DFDFDF; /* Darken header a bit */
        font-weight: bold;
    }

    td {
        background: #FAFAFA;
        text-align: center;
    }

    /* Cells in even rows (2,4,6...) are one color */
    tr:nth-child(even) td {
        background: #F1F1F1;
    }

    /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
    tr:nth-child(odd) td {
        background: #FEFEFE;
    }

    tr td:hover {
        background: #666;
        color: #FFF;
    }
    /* Hover cell effect! */
    button:active, button.active {
        background: red;
    }

</style>

@* Code for re-grouping and details *@
<script>
    function changegroup(groupfield) {
        @(ViewBag.VMName).viewDataSource.group(groupfield); 
        $(".@(ViewBag.VMName)-button").removeClass("active");
        $("#@(ViewBag.VMName)-groupbutton-"+groupfield).addClass("active");
    };
    function loadnextfunction(rowid,functionname,jsondata,colcount) {
        $("#"+rowid).after("<tr><td colspan='"+colcount+"'><div id='"+rowid+"-nextdiv'></div></td></tr>");
        $("#"+rowid+"-nextdiv").load("/HOME/ShowView?FunctionName="+functionname+"&TD=@(ViewBag.TD)&JSONPARAMETERS="+jsondata.replace(/&#123;/g,'{').replace(/&#125;/g,'}').replace(/&quot;/g,'"'));
    };
</script>

@* Display attributes, but the Groupable one will be treated special. *@
@{
    if (groupcount > 1) { 
        string firstclass = "active"; // set this for the first item, the first time.
        foreach (var item in ViewBag.AttList)
        {
            if (@item.Groupable)
            {
                <button class="@(ViewBag.VMName)-button @firstclass" id="@(ViewBag.VMName)-groupbutton-@item.AttributeName" onclick="changegroup('@item.AttributeName')">Group by @item.AttributeName.Replace('_', ' ')</button>
                firstclass = "";
            }
        }
    }
}
<div id="BINDDIV-@(ViewBag.VMName)" class="panels"
     data-role="listview"
     data-template="view-template-@(ViewBag.VMName)"
     data-bind="source: viewDataSource">
    <p>@(ViewBag.VMName)</p>
</div>
@* Template Code for the above section:*@
<script type="text/x-kendo-tmpl" id="view-template-@(ViewBag.VMName)">
    <div class="tab">
        <input class="tab-radio" type="radio" id="@(ViewBag.VMName)-Details-${value.replace(' ','_')}" name="Panel-Group-@(ViewBag.VMName)" />
        <label class="tab-label" for="@(ViewBag.VMName)-Details-${value.replace(' ','_')}">${value}</label>

        <div class="tab-panel">
            <div class="tab-content">
                <table>
                    <thead>
                        <tr>
                            @foreach (var item in ViewBag.AttList)
                            {
                                <th class="@(ViewBag.VMName)-@item.AttributeName">@item.AttributeName.Replace('_', ' ')</th>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        #
                        for (k=0; k < items.length; k++)
                        {
                        var thisrow = items[k];
                        #
                        <tr id="@(ViewBag.VMName)-#:k#">
                            @foreach (var item in ViewBag.AttList)
                            {
                                <td class="@(ViewBag.VMName)-@item.AttributeName">${thisrow.@item.AttributeName}</td>
                            }
                            <!--The following will put a details button if the datasource references a nextfunction-->
                            # if (thisrow.NEXTFUNCTION)
                            {
                            #
                            <td><button onclick="loadnextfunction('@(ViewBag.VMName)-#:k#','${thisrow.NEXTFUNCTION}' ,'${thisrow.NEXTJSON}',@(ViewBag.NumberofAttributes))">
                                    Details
                                    </button></td>
                            #
                            }
                            }
                            #
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>



<script>

     @(ViewBag.VMName) = kendo.observable({
         viewDataSource:  new kendo.data.DataSource({
             transport: {
                 read: {
                     url: '',
                     dataType: "json"
                 },
                 update: {
                     url: "",
                     dataType: "json",
                     type: "put"
                 },
                 parameterMap: function(options, operation) {
                     if (operation !== "read" && options.models) {
                         return {models: kendo.stringify(options.models)};
                     }
                 },
                 batch: true
             },
             requestEnd: function() {
                 setTimeout(function () {
                     setuptabs("BINDDIV-@(ViewBag.VMName)");
                     $(".@(ViewBag.VMName)-"+@(ViewBag.VMName).viewDataSource.group()[0].field).hide();
                 });
             },
             group: 
                       [{field: "@(ViewBag.FirstGroupAttribute)"}]
                  

         }
         )
     });
    kendo.bind($("#BINDDIV-@(ViewBag.VMName)"),@(ViewBag.VMName));

    var json = '@(ViewBag.JsonParameters)';
    // The json necessarily sometimes comes in with HTML/RegEx code and must be converted:
    var newjson = json.replace(/&quot;/g,'"').replace(/&#123;/g,'{').replace(/&#125;/g,'}');
    @(ViewBag.VMName).viewDataSource.transport.options.read.url = "@crudServiceBaseUrl"
            + 'readnew/' + '@(ViewBag.FunctionName)' + '/FunctionView?@@TD='+'@(ViewBag.td)' + '&@@JSONPARAMETERS='+newjson;

    @(ViewBag.VMName).viewDataSource.fetch();


</script>




 
